<template>
  <div class="">
    <div class="info-title">培训报名</div>
    <el-card>
      <div slot="header">
        培训报名信息填写
      </div>
      <el-form :label-position="labelPosition" :model="trainForm"  label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="trainForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证" prop="name">
              <el-input v-model="trainForm.idCard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="trainForm.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="trainForm.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作单位" prop="unit">
              <el-input v-model="trainForm.unit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省份" prop="province">
              <el-input disabled v-model="trainForm.province"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="报名项目" prop="projectId">
              <el-select v-model="trainForm.projectId" @change="$forceUpdate()">
                <el-option v-for="item in projects"  :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="住宿" prop="roomType">
              <el-radio-group v-model="trainForm.roomType">
                <el-radio label="标间" name="type"></el-radio>
                <el-radio label="单间" name="type"></el-radio>
                <el-radio label="无需住宿" name="type"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>发票</el-divider>
        <el-alert
          title="请认真填写发票信息，组委会将按照此信息开具发票，如不需要发票可不填"
          type="error"
          style="margin-bottom: 15px;">
        </el-alert>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单位名称" prop="invoiceTitle">
              <el-input v-model="trainForm.invoiceTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税号" prop="invoiceTaxNumber">
              <el-input v-model="trainForm.invoiceTaxNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="invoiceBankAddress">
              <el-input v-model="trainForm.invoiceBankAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行" prop="invoiceBank">
              <el-input v-model="trainForm.invoiceBank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="mark">
              <el-input v-model="trainForm.mark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider>邮寄信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收件人" prop="mailPerson">
              <el-input v-model="trainForm.mailPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="mailTel">
              <el-input v-model="trainForm.mailTel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件地址" prop="mailAddress">
              <el-input v-model="trainForm.mailAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="mark">
              <el-input v-model="trainForm.mark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="text-align: center;">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getProjectsByTrain,saveOrUpdate,getJoinProject} from "@/api/train";
export default {
  data () {
    return {
      trainId:'',
      singleRoomPresonSum:0,
      standardRoomPersonSum:0,
      labelPosition:'left',
      tableData: [],
      loading: false,
      tableRef: 'tableRef',
      searchForm: {},
      currentPage: 1,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      total: 0,
      trainForm:{
        name:'',
        idCard:'',
        sex:'',
        tel:'',
        weChat:'',
        unit:'',
        province:'',
        projectId:'',
        roomType:'',
        invoiceBank:'',
        invoiceBankAddress:'',
        invoiceTaxNumber:'',
        invoiceTitle:'',
        mailAddress:'',
        mailPerson:'',
        mailTel:'',
        mark:''
      },
      projects:[]
    }
  },
  created() {
    this.getTrainId()
    this.getTrainProjects()
    this.getJoinInformation()
  },
  methods:{
    getTrainId() {
      this.trainId = this.$route.params.id
      this.trainForm.province = this.$route.params.province
    },
    getJoinInformation() {
      // if(true) {
      if(this.$route.params.joinId) {
        let params = this.$route.params.joinId
        // let params = '168501948133737'
        getJoinProject(params).then(res => {
          this.trainForm = res.data
        })
      } else {
        return
      }
    },
    getTrainProjects() {
      let params = {
        trainId:  this.$route.params.id
      }
      getProjectsByTrain(params).then(res => {
        this.projects = res.data
      })
    },
    // 保存培训信息
    submit() {
      this.trainForm.trainId = this.$route.params.id
      // console.log(this.trainForm,'this.trainForm')
      saveOrUpdate(this.trainForm).then(res => {
        this.$router.push({name:'traininglist'})
      })
    }
  }
}
</script>

<style>
.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.form {
  margin: 40px auto 20px;
}
.my-label {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
</style>
